<template>
  <el-form :model="typeForm" label-width="120px">
    <el-form-item label="分类名称">
      <el-input v-model="typeForm.name" placeholder="分类名称" />
    </el-form-item>
    <el-form-item label="父级">
      <el-cascader
        v-model="typeForm.upType"
        :options="options"
        placeholder="请选择"
      />
    </el-form-item>
    <el-form-item label="分类图标(180*180)">
      <el-upload
        class="avatar-uploader"
        action="/api/upload"
        :show-file-list="false"
        accept="image/jpeg"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
      >
        <img v-if="typeForm.typeIcon" :src="typeForm.typeIcon" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Camera /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="排序">
      <el-input-number v-model="typeForm.orderNum" :min="1" :max="10" />
    </el-form-item>
    <el-form-item label="状态">
      <el-switch
        v-model="typeForm.isShow"
        inline-prompt
        active-text="显示"
        inactive-text="隐藏"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import type { goodsType } from "@/types/goods";
import { getGoodsSort } from "@/api/goods";
const typeForm = reactive({
  name: "",
  orderNum: 1,
  upType: -1,
  isShow: 0,
  typeIcon: "",
});
let options = [
  {
    value: "basic",
    label: "Basic",
    children: [
      {
        value: "layout",
        label: "Layout",
      },
      {
        value: "color",
        label: "Color",
      },
      {
        value: "typography",
        label: "Typography",
      },
      {
        value: "icon",
        label: "Icon",
      },
      {
        value: "button",
        label: "Button",
      },
    ],
  },
  {
    value: "form",
    label: "Form",
    children: [
      {
        value: "radio",
        label: "Radio",
      },
      {
        value: "checkbox",
        label: "Checkbox",
      },
      {
        value: "input",
        label: "Input",
      },
      {
        value: "input-number",
        label: "InputNumber",
      },
      {
        value: "select",
        label: "Select",
      },
      {
        value: "cascader",
        label: "Cascader",
      },
      {
        value: "switch",
        label: "Switch",
      },
      {
        value: "slider",
        label: "Slider",
      },
      {
        value: "time-picker",
        label: "TimePicker",
      },
      {
        value: "date-picker",
        label: "DatePicker",
      },
      {
        value: "datetime-picker",
        label: "DateTimePicker",
      },
      {
        value: "upload",
        label: "Upload",
      },
      {
        value: "rate",
        label: "Rate",
      },
      {
        value: "form",
        label: "Form",
      },
    ],
  },
];
let upTypeList: goodsType[] = [];
const handleSuccess = (res: any, file: any) => {
  console.log(res, file);
  typeForm.typeIcon = res.imgAddress;
};
const beforeUpload = () => {};
getGoodsSort().then((res) => {
  if (res.data.code === 200) {
    upTypeList = res.data.data.filter((item: any) => {
      return item.upType === -1;
    });
    console.log(upTypeList);
  }
});
</script>

<style scoped lang="scss">
:deep(.el-input__inner) {
  height: 34px;
  font-weight: 300;
}
:deep(.el-cascader) {
  width: 100%;
}
.avatar-uploader {
  height: 65px;
  width: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed var(--el-border-color);
  border-radius: 2px;
  cursor: pointer;
  background-color: rgb(247, 247, 247);
  .el-icon {
    font-size: 30px;
    color: gray;
  }
  img {
    width: 100%;
  }
}
.el-image {
  width: 100px;
  height: 100px;
}
</style>
